<template>
  <div class="g-left-right">
    <div class="left g-card">
      <div class="title">
        <div class="title-name">角色列表</div>
        <div class="title-btn" @click="addFn">新建</div>
      </div>
      <div class="item-list">
        <div
          class="item"
          :class="{ active: activeIndex == key }"
          v-for="(role, key) in roles"
          :key="role.id"
          @click="switchRole(key, role)">
          <div class="name">
            {{ role.roleName }}
            <span style="margin-left: 10px">({{ role.userCount }})</span>
          </div>
        </div>
      </div>
    </div>
    <div class="right g-card mt0">
      <div class="title-name">
        {{ currentStatus === 'detail' ? '角色详情' : currentStatus === 'add' ? '新建角色' : '编辑角色' }}
      </div>
      <div v-if="currentStatus === 'detail'">
        <div style="margin-top: 20px">
          <el-form ref="codeForm" label-position="right" label-width="80px">
            <el-form-item label="角色员工">
              <template v-for="(item, index) in roleObj.users">
                <el-tag v-if="item.userName" size="medium" :key="index">{{ item.userName }}</el-tag>
              </template>
            </el-form-item>
            <el-form-item label="管理范围">
              <template v-if="roleObj.dataScope != 2">
                {{ setName() }}
              </template>

              <template v-for="(item, index) in roleObj.depts">
                <el-tag v-if="item.deptName" size="medium" :key="index">{{ item.deptName }}</el-tag>
              </template>
            </el-form-item>
            <el-form-item label="功能权限">
              <el-tree
                :data="menuOptions"
                show-checkbox
                ref="menu"
                node-key="id"
                disabled
                empty-text="加载中，请稍后"
                :props="defaultProps"></el-tree>
            </el-form-item>
          </el-form>
        </div>
        <div class="g-footer-sticky bottom" v-if="roles[activeIndex]">
          <el-button plain type="danger">删除</el-button>
          <el-button type="primary" @click="edtiFn">编辑</el-button>
        </div>
      </div>
      <div v-else-if="currentStatus === 'add'">
        <add-or-edit key="1" :status="currentStatus" @update="updateFn" @cancel="cancel" :list="menuOptions" />
      </div>
      <div v-else>
        <add-or-edit
          key="2"
          :status="currentStatus"
          :data="roleObj"
          @update="updateFn"
          @cancel="cancel"
          :list="menuOptions" />
      </div>
    </div>
  </div>
</template>
<script>
import { getRolesList, getRoleDetail, treeselect, deleteRole } from '@/api/organization'
import AddOrEdit from './add.vue'
export default {
  name: 'manage-center-roles',
  data() {
    return {
      roles: [],
      activeIndex: 0,
      roleObj: {
        users: [],
      },
      currentStatus: 'detail',
      defaultProps: {
        children: 'children',
        label: 'label',
        disabled: this.isDisabled,
      },
      menuOptions: [],
      dataScopeOptions: [
        {
          value: '1',
          label: '全部数据权限',
        },
        {
          value: '2',
          label: '自定数据权限',
        },
        {
          value: '3',
          label: '本部门数据权限',
        },
        {
          value: '4',
          label: '本部门及以下数据权限',
        },
        {
          value: '5',
          label: '仅本人数据权限',
        },
      ],
    }
  },
  components: {
    AddOrEdit,
  },
  created() {
    this.getList()
    this.getMenuTreeselect()
  },
  methods: {
    isDisabled() {
      return true
    },
    setName() {
      let str = ''
      this.dataScopeOptions.map((data) => {
        if (data.value == this.roleObj.dataScope) {
          str = data.label
        }
      })
      return str
    },
    updateFn() {
      if (this.currentStatus === 'edit') {
        this.currentStatus = 'detail'
        getRolesList().then((res) => {
          this.roles = res.rows
        })
        this.getRoleDetailFn(this.roles[this.activeIndex].roleId)
      } else {
        this.currentStatus = 'detail'
        this.getList()
      }
    },
    cancel() {
      this.$confirm(`是否确认取消${this.currentStatus === 'add' ? '新建' : '编辑'}角色？取消后不可恢复。`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.currentStatus = 'detail'
          this.getRoleDetailFn(this.roleObj.roleId)
        })
        .catch(function () {})
    },
    getList() {
      getRolesList().then((res) => {
        this.roles = res.rows
        if (this.roles && this.roles.length) {
          this.activeIndex = 0
          this.getRoleDetailFn(this.roles[0].roleId)
        }
      })
    },
    getRoleDetailFn(id) {
      getRoleDetail(id).then((res) => {
        this.roleObj = res.data
        if (this.roleObj.menus) {
          let arr = this.roleObj.menus.map((data) => {
            return data.menuId
          })
          this.$refs.menu.setCheckedKeys(arr)
        }
      })
    },
    addFn() {
      if (this.currentStatus !== 'detail') {
        this.$confirm(`是否确认取消${this.currentStatus === 'add' ? '新建' : '编辑'}角色？取消后不可恢复。`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.currentStatus = 'add'
          })
          .catch(function () {})
      } else {
        this.currentStatus = 'add'
      }
    },
    switchRole(index, data) {
      if (this.currentStatus !== 'detail') {
        this.$confirm(`是否确认取消${this.currentStatus === 'add' ? '新建' : '编辑'}角色？取消后不可恢复。`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.currentStatus = 'detail'
            this.activeIndex = index
            this.getRoleDetailFn(data.roleId)
          })
          .catch(function () {})
      } else {
        this.activeIndex = index
        this.getRoleDetailFn(data.roleId)
      }
    },
    edtiFn() {
      this.currentStatus = 'edit'
    },
    deleteFn() {
      this.$confirm('是否确认删除角色？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          deleteRole(this.roleObj.roleId).then((res) => {
            this.getList()
          })
        })
        .catch(function () {})
    },
    /** 查询菜单树结构 */
    getMenuTreeselect() {
      treeselect().then((response) => {
        this.menuOptions = response.data
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.title-name {
  font-size: 14px;

  font-weight: 600;
  color: #333333;
  display: flex;
  align-items: center;
}
.bottom {
  justify-content: flex-end;
  padding: 20px;
}
.left {
  border-right: 1px solid #f1f1f1;
  .title {
    color: var(--color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    // padding-right: 20px;

    .title-btn {
      cursor: pointer;
      display: flex;
      align-items: center;
      font-size: 14px;

      font-weight: 400;
      color: var(--color);

      &:hover {
        opacity: 0.7;
      }
    }
  }

  .item-list {
    max-height: 800px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;

    .item {
      cursor: pointer;
      display: flex;
      // justify-content: space-between;
      align-items: center;
      font-size: 12px;
      color: #000;
      height: 40px;
      line-height: 40px;
      width: 100%;
      padding-left: 20px;
      border-radius: 5px;
      .name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .dropdown {
        .dot {
          cursor: pointer;
          width: 14px;
          height: 14px;
          line-height: 14px;
          font-size: 14px;
          font-family: JMT-Font, JMT;
          font-weight: normal;
          color: var(--color);
          margin-right: 20px;
          margin-left: 5px;
        }
      }

      &:hover {
        color: var(--color);
        background: #f5f8fe;
        opacity: 0.8;
      }
    }

    .active {
      color: var(--color);
      background: #f5f8fe;
    }
  }
}
</style>
